<template>
  <div class="letter_list">
    <li v-for="item of letters" :key="item" @click="letterClick" :ref="item" class="list" @touchstart.prevent="touchstart" @touchend="touchend" @touchmove="touchmove" >{{item}}</li>
  </div>
</template>

<script>
    export default {
        name: "LetterList",
      props:{
        allCityList:Object
      },
      computed:{
         letters (){
            const letters =[]
            for (let i in this.allCityList){
              letters.push(i)
            }
            return letters
          }
      },
      data () {
          return {
            touchstuats:false,
            startY:0
          }
      },
      updated (){
          this.startY =this.$refs['A'][0].offsetTop
      },
      methods:{
        letterClick (e){
          this.$emit('change',e.target.innerHTML)
        },
        touchstart (){
          this.touchstuats =true
        },
        touchmove (e){
          if(this.touchstuats){

            const touchY =e.touches[0].clientY - 50
            const index =Math.floor(touchY - this.startY )/20;
              if(index >= 0 && index <this.letters.length){
                this.$emit('change',this.letters[index])
              }
          }
        },
        touchend (){
          this.touchstuats =false
        }
      }
    }
</script>

<style scoped lang="stylus">
  .letter_list
    display flex
    flex-direction column
    justify-content center
    position absolute
    width .6rem
    text-align center
    right 0
    top:1rem
    bottom :0
    .list
      line-height .4rem
      color #06c1ae

</style>
